<?php
use yii\helpers\Url;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>宏三内测专区商品详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/reset.css" />
    <link rel="stylesheet" href="/static/css/goods.css" />
    <script src="/static/script/zepto.min.js"></script>
    <script src="/static/script/touch.slide.js"></script>

</head>
<body class="u-bg1">

<div id="j-slide" class="m-slide" pid="<?php echo $pid;?>">
	<ul class="f-cb">
        <?php if(isset($data['thumb'])){?>
            <?php foreach($data['thumb'] as $k=>$v){?>
                <?php if($k==0&&$data['video']&&$data['video']!=1){?>
                    <li><img src="<?php echo $v;?>" /><span id="J_play">&nbsp;</span></li>
                <?php }else{?>
                    <li><img src="<?php echo $v;?>" /></li>
                <?php }?>
            <?php } ?>
        <?php } ?>
	</ul>
</div>

<?php if(isset($data['video'])){?>
    <div class="m-video" id="J_vDiv">
        <video src="<?php echo $data['video'];?>" id="J_vCnt" src="movie.ogg" width="100%"></video>
    </div>
<?php } ?>

<dl class="m-gds-desc">
	<dt><?php if(isset($data['name'])){echo $data['name'];}?></dt>
	<dd>&nbsp;</dd>
	<dd><em>￥ <b> <?php if(isset($data['price'])){echo $data['price'];}else{echo '0.00';}?></b></em><i>
            <?php if(isset($data['productInfo']['count']['result']['count'])){echo $data['productInfo']['count']['result']['count'];}?></i><i class="J-collect-count" data-pid="<?php if(isset($data['pid'])){echo $data['pid'];}?>"><?php if(isset($data['productInfo']['collect'])){echo $data['productInfo']['collect'];}?></i></dd>
</dl>

<?php //if(isset($data['promotion'])&&$data['promotion']){?>
<!--    <h4 class="m-gds-ct1">-->
<!--        <span>领券</span>-->
<!--        --><?php //foreach($data['promotion'] as $k=>$item){?>
<!--                 --><?php // if($item[0]['type'] == 0 || $item[0]['type'] == 1) {?>
<!--                    <a href="javascript:;" data-groupid="--><?php //echo $item[0]['group_id'];?><!--">满--><?php //echo $item[0]['discount']['must_discount_price'] ?><!--减--><?php //echo $item[0]['discount']['value'] ?><!--</a>-->
<!--                 --><?php //} ?>
<!--                --><?php // if($item[0]['type'] == 2 || $item[0]['type'] == 3) {?>
<!--                    <a href="javascript:;" data-groupid="--><?php //echo $item[0]['group_id'];?><!--">满--><?php //echo $item['0']['voucher']['must_voucher_price'] ?><!--减--><?php //echo $item[0]['voucher']['value']?><!--</a>-->
<!--                --><?php //} ?>
<!--                --><?php // if($item[0]['type'] == 4 || $item[0]['type'] == 5) {?>
<!--                    <a href="javascript:;" data-groupid="--><?php //echo $item[0]['group_id'];?><!--">满--><?php //echo $item['0']['exchange']['must_exchange_count'] ?><!--减--><?php //echo $item[0]['exchange']['must_exchange_price']?><!--</a>-->
<!--                --><?php //} ?>
<!--            --><?php //} ?>
<!--    </h4>-->
<?php //} ?>

<!--<h4 class="m-gds-ct2">-->
<!--	<span>促销</span>-->
<!--	<a href="javascript:;">赠品</a>-->
<!--</h4>-->

<?php if(isset($data['saleProp_list'])&&$data['saleProp_list']){?>
    <h4 class="m-gds-ct3" id="J_forAttr">
        颜色；尺码；数量
    </h4>
<?php } ?>


<h4 class="m-gds-ct4">
	<span>库存</span><em><?php if(isset($data['stock'])){echo $data['stock'];}?></em><br />
	<span>运费</span><em>免费</em>
</h4>

<div class="m-gds-img">
    <?php if(isset($data['productDetail']['pictures'][0])){ ?>
        <?php echo $data['productDetail']['pictures'][0]; ?>
    <?php } ?>
</div>

<div class="m-gds-tab f-cb" id="J_sltGds_tab">
    <span class="z-on">商品评价</span>
    <?php if(isset($data['productDetail']['attribute'])&&$data['productDetail']['attribute']){ ?>
        <span>商品参数</span>
    <?php } ?>
</div>


    <div class="m-cmmt J_sltGds_cnt">
        <?php if($data['productInfo']['result']){ ?>
                <h5 class="m-gds-comm f-cb">
                    <span>评价</span>
                    <b>好评：100%</b>
                    <label>共 <em><?php if(isset($data['productInfo']['count']['result']['count'])){ echo $data['productInfo']['count']['result']['count'];}?></em> 条评论</label>
                </h5>

                <?php if(isset($data['productInfo']['result'])){?>
                    <?php foreach($data['productInfo']['result'] as $k=>$v){ ?>
                        <dl>
                            <dt><b><?php if(isset($v['username']['nickname'])&&$v['username']['nickname']){echo $v['username']['nickname'];}else{echo "匿名"; } ?></b><em> <?php echo $v['created_at']?></em></dt>
                            <dd class="desc"> <?php echo $v['content']?></dd>
                            <dd class="attr"><?php echo $v['attr']?></dd>
                        </dl>
                    <?php } ?>
                <?php } ?>
                <a href="<?=url::to(['comment/index','product_id'=>isset($data['pid'])?$data['pid']:''])?>" class="m-gds-all-comm">查看全部评论</a>
        <?php }else{ ?>
            <h3 class="m-no-data">暂无评论</h3>
        <?php } ?>
    </div>



<div class="m-detl J_sltGds_cnt">
    <?php if(isset($data['productDetail']['attribute'])){ ?>
        <?php echo $data['productDetail']['attribute']; ?>
    <?php } ?>
</div>

<div class="m-gds-nav">
	<a href="javascript:;" class="J-add-collect u-coll" data-pid="<?php if(isset($data['pid'])){echo $data['pid'];}?>">
        <?php if($data['productInfo']['usr_collect']>0){ ?>已收藏<?php }elseif($data['productInfo']['usr_collect']==0){ ?> 收藏 <?php }?>
    </a>
	<a class="u-cart" href="<?=Url::to(['cart/view','shop_id' => isset($data['shop_id'])?$data['shop_id']:""])?>">购物车<em><?php if(isset($data['cartCount'])){echo $data['cartCount'];}?></em></a>
<!--    <form action="--><?//=Url::to('/web/cart/add')?><!--" method="post" id="cartForm">-->
        <input type="hidden" name='product_id' class="cart-product-id" value="<?php if(isset($data['pid'])){echo $data['pid'];}?>" />
        <input type="hidden" name="shop_id" value="" class="cart-shop-id"/>
        <input type="hidden" name="num" value="1" class="cart-num" />
        <a href="javascript:;" class="addCart u-add">加入购物车</a>
<!--    </form>-->
    <form action="/web/order/buy" method="post" id="buyForm">
        <input type="hidden" name='product_id' value="<?php if(isset($data['pid'])){echo $data['pid'];}?>" class="buy-product-id"/>
        <input type="hidden" name="shop_id" value="" class="buy-shop-id"/>
        <input type="hidden" name="hide_buy" value="1"/>
        <input type="hidden" name="num" value="1" class="buy-num" />
        <a href="javascript:;" class="buyCart u-buy">购买</a>
    </form>
</div>

<div class="mask" id="J_mask"></div>
<div class="m-slt-attr" id="J_sltAttr">
	<a href="javascript:;" id="J_clsAttr" class="close">&nbsp;</a>
	<dl class="f-cb">
		<dt><img src="<?php if(isset($data['thumb'][0])){echo $data['thumb'][0];}?>" /></dt>
		<dd><a href="javascript:;"><?php if(isset($data['name'])){echo $data['name'];}?></a></dd>
		<dd>￥ <?php if(isset($data['price'])){echo $data['price'];}?></dd>
	</dl>
    <?php if(isset($data['saleProp_list'])){?>
        <?php foreach($data['saleProp_list'] as $ka=>$va){?>
            <p>
                <b><?php echo $ka;?></b>
                    <?php foreach($va as $kal=>$val){?>
                        <?php $flag=false;?>
                        <?php if(isset($data['newattr'])){?>
                            <?php foreach ($data['newattr'] as $k=>$v) {?>
                                    <?php if($kal == $k){?>
                                         <?php $flag=true;?>
                            <?php }}}?>
                        <a href="/web/product/detail?pid=<?php echo $pid;?>" id="J-detail" attr-id="<?php echo $kal;?>"><?php echo $val;?></a>
                    <?php } ?>
            </p>
        <?php }?>
    <?php } ?>
	<h4 style="border-bottom: 0px;padding-bottom: 23px">
		<span>
			<label>剩余<em class="surplus"><?php echo ($data['stock'] - 1)?></em></label>
			<a href="javascript:;" class="J_actNum">-</a><a href="javascript:;" id="J_count">1</a><a href="javascript:;" class="z-add J_actNum">+</a>
		</span>
	</h4>
	<a href="javascript:;" class="u-sure" id="J_sure"><span>确定</span></a>
</div>




<script>

    // 预判断是否存在属性及属性长度
    var isAttr = <?php echo $isAttr;?>, lenAttr =  <?php echo $lenAttr;?>, canSub = false;

    // 属性弹窗的点击来源
    var attrPopSource = '';

    // 焦点图
    $('#j-slide').touchSlide({'scale':.56, speed:.3,auto:false});

    $(function(){

        var proStock = $('.m-gds-ct4').find('em').text();
        var video = document.getElementById('J_vCnt');
        $('#J_play').tap(function(){
            var _this = $(this);

            $('#J_vDiv').show();

            if(video.paused){
                video.play();
            }else{
                video.pause();
            }
        });
        $('#J_vDiv').tap(function(){

            $('#J_vDiv').hide();

            video.pause();
        });

        // lock scroll
        var def = function(e){ e.preventDefault(); };

        // Mask & Kernel
        var mask = $('#J_mask'), _kernel = kernel();

        // Tag & height
        var sltAttr = $('#J_sltAttr'), attrHt = sltAttr.height();
        sltAttr.css({'bottom':0 - attrHt});

        // cssText
        var _old = document.querySelector('#J_sltAttr').style.cssText;

        $('#J_forAttr').tap(function(){

            if(proStock<=0) return !1;
            attrPopSource = 'J_forAttr';

            // lock
            document.addEventListener('touchmove', def, false);

            mask.show();
            document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .15s linear;'+ _kernel +'transform:translateY(-'+attrHt+'px);';

            sltAttr.find('img').show();
        });

        $('#J_sltAttr').on('touchend','#J-detail',function(evt){
            count = 1;
            $('.buy-num').val(count);;
        })
        sltAttr.on('touchend', '#J_clsAttr', function(evt){

            var _tmp = [];
            sltAttr.find('p').each(function(){
                var _that = $(this), _tit = _that.find('b').text(), _val = _that.find('a.z-on').text();
                if(_val !== undefined && _val !== null) _tmp.push(_tit + '：' + _val);
            });

            var _count = sltAttr.find('#J_count').text();
            $('.cart-num').val(_count);
            if(_count !== undefined) _tmp.push('数量：' + _count);
            if(_tmp.length > 0){
                $('#J_forAttr').html(_tmp.join('; '));
            }

            sltAttr.find('img').hide();

            document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .3s linear;'+ _kernel +'transform:translateY(0px);';
            mask.hide();

            // unlock
            document.removeEventListener('touchmove', def, false);

            // 阻止点透
            evt.preventDefault();
            return false;
        });

        sltAttr.on('touchend', '#J_sure', function(evt){

            var _tmp = [];

            if(isAttr == '1'){

                if(!canSub) return !1;

                sltAttr.find('p').each(function(){
                    var _that = $(this), _tit = _that.find('b').text(), _val = _that.find('a.z-on').text();
                    if(_val !== undefined && _val !== null) _tmp.push(_tit + '：' + _val);
                });
            }

            var _count = sltAttr.find('#J_count').text();
            $('.cart-num').val(_count);

            _tmp.push('数量：' + _count);
            $('#J_forAttr').html(_tmp.join('; '));

            // 点击 [加入购物车] 后 弹窗的 [确定] 按钮操作
            if(attrPopSource == 'addCart'){


                $.get("<?=url::to('/web/cart/add')?>", {product_id: $('.cart-product-id').val(), num:_count}, function(data){
                    if(data.status==1){
                        msgPopup(data.message);
                        $('.u-cart').find('em').text(data.count);
                    }else if(data.status==3){
                        msgPopup(data.message);
                        window.location.href = '/web/user/login';
                    }else{
                        msgPopup(data.message);
                    }
                },'jsonp');
            }

            sltAttr.find('img').hide();
            document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .3s linear;'+ _kernel +'transform:translateY(0px);';
            mask.hide();

            // unlock
            document.removeEventListener('touchmove', def, false);

            // 阻止点透
            evt.preventDefault();
            return false;
        });

        //
        sltAttr.on('touchend', 'p a', function(evt){

            $(this).addClass('z-on').siblings().removeClass('z-on');

            var _tmp = [];
            $('.m-slt-attr p').each(function(){
                var _tm = $(this).find('.z-on').attr('attr-id');
                if(_tm !== undefined) _tmp.push(_tm);
            });
            if(_tmp.length == lenAttr){
                $.get("<?=url::to(['product/herfpage'])?>", {attr:_tmp, num:$('#J_count').text(), poid:$('.m-slide').attr('pid')}, function(data){
                    if(data.status == 1){
                        $('.cart-product-id, .buy-product-id').val(data['pid']);
                        $('#J_sltAttr').find('h4 span label').text('剩余'+data['stock']);
                        $('#J_sltAttr').find('#J_count').text('1');
                        canSub = true;
                    }else{
                        msgPopup(data['message']);
                        canSub = false;
                    }
                }, 'jsonp');
            }

            // 阻止点透
            evt.preventDefault();
            return false;
        });

        // 防止点透
        sltAttr.on('touchend', function(evt){ evt.preventDefault(); });

        //
        var count = 1, total = <?php echo ($data['stock'] - 1);?>,stockinfo = $('.m-gds-ct4').find('em').text();
        var _product_id = $('.cart-product-id').val();
        sltAttr.on('touchend', 'a.J_actNum', function(evt){
            var _that = $(this);
            if(_that.hasClass('z-add')){
                if(count>=stockinfo){
                    msgPopup('库存不足',2000);
                    return false;
                }
                if(total <= 0 ) return !1;
                count++;
                total--;
               //ajax判断点击的数量是否与库存相比较
                _that.prev().text(count);
            }else{
                if(count <= 1) return !1;
                count--;
                total++;
                _that.next().text(count);
            }

            _that.parent().find('label').text('剩余'+ total)

            // $(this).addClass('z-on').siblings().removeClass('z-on');

            // 阻止点透
            evt.preventDefault();
            return false;
        });

        var zon = 'z-on';
        $('#J_sltGds_tab').on('tap', 'span', function(){

            var _this = $(this);

            if(_this.hasClass(zon)) return !1;

            _this.addClass(zon).siblings().removeClass(zon);

            var _i = $('#J_sltGds_tab span').index(_this);
            $('.J_sltGds_cnt').hide().eq(_i).show();
        });

        $('.m-gds-ct1').tap(function(){
            var _gropuid = $(this).find('a').attr('data-groupid');
            $.get('<?=url::to('receive')?>',{group_id:_gropuid},function(data){
                if(data.status==1){
                    msgPopup(data.message);
                    return;
                }else{
                    msgPopup(data.message);
                }
            },'jsonp')
        })

        $('.J-add-collect').tap(function(){
           var _pid = $('.cart-product-id').val();
            $.get('<?=url::to('addcollect')?>',{pid:_pid},function(data){
                if(data.status==1){
                    msgPopup(data.message);
                    if(data.type==2){
                        $('.J-add-collect').text('收藏');
                        $('.J-collect-count').text(data.count);
                    }else if(data.type==1){
                        $('.J-add-collect').text('已收藏');
                        $('.J-collect-count').text(data.count);
                    }
                } else {
                    msgPopup(data.message);
                }
            },'jsonp')
        })



        $('.addCart').tap(function(){
            if(proStock<=0){
                msgPopup('库存不足');
                return false;
            }
            attrPopSource = 'addCart';
            // lock
            document.addEventListener('touchmove', def, false);
            mask.show();
            document.querySelector('#J_sltAttr').style.cssText = _old + _kernel + 'transition:all .15s linear;'+ _kernel +'transform:translateY(-'+attrHt+'px);';

            sltAttr.find('img').show();
        });

        $('.buyCart').on('touchend', function(evt){

            if(proStock<=0){
                msgPopup('库存不足');
                return false;
            }
            // 如果有属性但未选择 则阻止
            if(isAttr == '1' && !canSub){
                msgPopup('请选择完整商品属性！');
                return !1;
            }
            $('.buy-product-id').val($('.cart-product-id').val());
            $('.buy-num').val($('.buy-num').val());
            $("#buyForm").submit();

            evt.preventDefault();
            return !1;
        })
    });

    // 判断是否选择属性
    function isSltAttr(){

        var _bool = false, _tmp = [];

        $('.m-slt-attr p').each(function(){
            if($(this).find('.z-on').attr('attr-id') !== undefined) _tmp.push($(this).find('.z-on').attr('attr-id'));
        });

        if(_tmp.length == lenAttr) _bool = true;

        return _bool;
    }



    // get kernel
    function kernel(){
        var _style = document.createElement('div').style;
        var _kernel = ['-webkit-', '-moz-', '-o-', '-ms-'];
        for(var i in _kernel){
            var _v = _kernel[i] + 'transform';
            if(_style[_v] !== undefined) return _kernel[i];
        }
        return '';
    }
</script>

